<template>
  <div id="draw-container">
    <canvas
      id="charting-frame"
      width="1200"
      height="600"
    />

    <div id="main-view">
      <div id="map" />
      <canvas
        id="overmap"
        width="900"
        height="500"
      />
    </div>

    <!-- 比例尺 -->
    <div id="scale-warp">
      <canvas
        id="copy-scale"
        width="160"
        height="70"
      />
    </div>
    <!-- 图例 -->
    <div id="legend-warp">
      <canvas
        id="legend-c"
        width="250"
        height="300"
      />
    </div>
  </div>

  <div id="menu-pane" />

  <!-- 雪碧图 -->
  <div class="sprite-view">
    <div
      v-for="(item, key) in spriteJson"
      :key="key"
      style="float: left"
      @click="setIcon(key)"
      @mouseenter="showIconName(key)"
    >
      <div :style="imgPostion(item)" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, watch } from 'vue'

import { Pane } from 'tweakpane'

// import mapbox from 'mapbox-gl'

import {
  setGraticules,
  setRule,
  setOuterFrame,
  setLegend, setLegend2,
  clipMap,
  initMap,
  addBackground, getBgStyle,
  addLine, getLineStyle,
  addFill, getFillStyle,
  addPoint, getPointStyle,
  addTiles, getRasterStyle,
  setPaintProperty, setLayoutProperty, setScale, presetIcon,
  format_step, unformat_step, format_interpolate_linear, unformat_interpolate_linear
} from '@/components/chartingmap/index'

import borderPng from '@/assets/border.png'
import srmPng from '@/assets/srm.jpg'
// 雪碧图
import spriteJson from '../../public/resources/mapbox/sprite.json'
import sprite from '../../public/resources/mapbox/sprite.png'

let map
let canvas_width = 1200
let canvas_height = 600
let ctx
let mainView
let scaleWarp
let legendWarp
onMounted(() => {
  const chartingFrame = document.getElementById('charting-frame')
  const { clientWidth, clientHeight } = chartingFrame
  canvas_width = clientWidth
  canvas_height = clientHeight
  ctx = chartingFrame.getContext('2d')

  mainView = document.getElementById('main-view')
  scaleWarp = document.getElementById('scale-warp')
  legendWarp = document.getElementById('legend-warp')
  menu()

  map = initMap({ container: 'map' }, mapLoaded)
})

function mapLoaded() {
  window.rm = map
  // presetIcon(map, 'texute_slash_green', '/texure/slash_green.png')

  bindEvents()
  addBackground(map, 'background')
  addTiles(map)
  addLine(map, 'china', '/data/china.json')
  addFill(map, 'provience', '/data/provience.json')
  addPoint(map, 'captial', '/data/provienceCaptial.json')
  addFill_subsection() // 分段图

  redraw()
  drawScale()
  drawLegend()
}

function bindEvents() {
  const clipOpts = {
    overmapId: 'overmap',
    containerId: 'draw-container',
    mapTop: mapOpts.top,
    mapLeft: mapOpts.left
  }
  clipMap(map, clipOpts, e => console.log(e))

  map.on('zoomend', e => {
    redraw()

    drawScale()
  })

  map.on('click', e => {
    console.log(e.lngLat)
  })
}

window.clip = function() {
  const canvas_amap = document.getElementById('overmap')
  canvas_amap.style.display = 'block'
}

// ------ 刻度尺 ------
// --- 刻度尺 ---
const ruleOptions = reactive({
  width: canvas_width,
  height: canvas_height,
  top: 20, // 相对与canvas坐上的位置 default:0
  left: 20, // default:0
  segment: 4, // 刻度小线段的长度
  cm_x: 1, // x轴刻度间隔 // 厘米
  cm_y: 1 // y轴刻度间隔 // 厘米
})
function drawRule() {
  setRule(ctx, ruleOptions)
}

// --- 外框 ---
const outnerFrameOptions = reactive({
  width: canvas_width, // canvas size
  height: canvas_height,
  top: 20, // 相对于刻度尺左上角 default: 20
  left: 20,
  right: 20, // 相对于canvas右下角的位置 // default: top - ruleOptions.top
  bottom: 20,
  w: 10, // 纵向的宽度
  h: 10, // 横向的高度
  fillColor: '#9b9b9b',
  isTexure: false, // 填充纹理
  texure: 'border'
})
function drawOutnerFrame() {
  const opts = Object.assign({}, outnerFrameOptions)
  opts.top = ruleOptions.top + outnerFrameOptions.top
  opts.left = ruleOptions.left + outnerFrameOptions.left
  setOuterFrame(ctx, outnerFrameOptions)
}

// --- map ---
const mapOpts = reactive({
  width: 900,
  height: 500,
  top: 50, // 相对于刻度尺
  left: 200
})

// 根据刻度尺和地图的尺寸，计算map居中时的左上角位置
function calcMapPosition() {
  let { clientWidth: map_width, clientHeight: map_height } = mainView
  const left = (canvas_width - ruleOptions.left) / 2 - map_width / 2 - ruleOptions.left
  const top = (canvas_height - ruleOptions.top) / 2 - map_height / 2 - ruleOptions.top

  return { left, top }
}

// --- 经纬网 ---
const graticulesOpts = reactive({
  width: canvas_width, // canvas的尺寸
  height: canvas_height,
  top: mapOpts.top, // 地图的左上角位置
  left: mapOpts.left,
  offsetY: 10, // 相对于地图的offsetY
  offsetX: 10, // 相对于地图的offsetX
  mapWidth: 900, // 地图尺寸
  mapHeight: 500,
  lat_degree: 10, // 维度间隔
  lng_degree: 10 // 经度间隔
  // bounds: undefined, // map bounds
  // zoom: undefined
})
function drawGraticules() {
  const opts = Object.assign({}, graticulesOpts)
  opts.bounds = map.getBounds() // 这两个属性的更改会影响watch
  opts.zoom = map.getZoom()
  setGraticules(ctx, opts)
}

// 比例尺
const scaleOptions = reactive({
  visibility: true,
  bottom: 20,
  left: 50,
  offsetX: 10,
  offsetY: 10
})
function drawScale() {
  const canvas_scale = document.getElementById('copy-scale')
  const ctx_scale = canvas_scale.getContext('2d')

  const { clientWidth, clientHeight } = canvas_scale
  ctx_scale.clearRect(0, 0, clientWidth, clientHeight)

  setScale(ctx_scale, scaleOptions, 't4')
}
// 图例
const legendMes = {
  title: 'ddd',
  legend: [
    { type: 'line', label: '仙儿', color: 'green' },
    { type: 'point', label: '哈哈哈', icon: 'aquarium-15' },
    { type: 'fill', label: '五菱', color: 'blue', texure: 'slash_blue' }, // color 或者 texure
    { type: 'step', label: '雅迪', steps: [
      { label: '<10', type: 'fill', color: '#61EE67' },
      { label: '<100', type: 'fill', color: '#EBF55F' },
      { label: '<1000', type: 'fill', color: '#C64521' },
      { label: '<100', type: 'fill', color: '#C64521' },
      { label: '<100', type: 'fill', color: '#C64521' }
    ] },
    { type: 'line', label: 'ggg', color: 'yellow' }
  ]
}
function drawLegend() {
  const canvas_legend = document.getElementById('legend-c')
  const ctx_legend = canvas_legend.getContext('2d')

  const { clientWidth, clientHeight } = canvas_legend
  ctx_legend.clearRect(0, 0, clientWidth, clientHeight)

  setLegend(ctx_legend, legendMes)
}

// tweak pane
function menu() {
  const menuDom = document.getElementById('menu-pane')
  const pane = new Pane({
    container: menuDom
  })
  // -------------------------------------------------------------------------------------
  const folder_rule = pane.addFolder({ title: '刻度尺', expanded: false })
  const rule_top = folder_rule.addBinding(ruleOptions, 'top', { label: 'top', min: 0, max: 100, step: 1 })
  const rule_left = folder_rule.addBinding(ruleOptions, 'left', { label: 'left', min: 0, max: 100, step: 1 })
  const rule_segment = folder_rule.addBinding(ruleOptions, 'segment', { label: '刻度长度', min: 0, max: 100, step: 1 })
  const rule_interval_x = folder_rule.addBinding(ruleOptions, 'cm_x', { label: '刻度X间隔', min: 0, max: 100, step: 1 })
  const rule_interval_y = folder_rule.addBinding(ruleOptions, 'cm_y', { label: '刻度Y间隔', min: 0, max: 100, step: 1 })
  // -------------------------------------------------------------------------------------
  const folder_outnerFrame = pane.addFolder({ title: '外框', expanded: false })
  const outnerFrame_top = folder_outnerFrame.addBinding(outnerFrameOptions, 'top', { label: '上', min: -20, max: 50, step: 1 })
  const outnerFram_right = folder_outnerFrame.addBinding(outnerFrameOptions, 'right', { label: '右', min: -20, max: 50, step: 1 })
  const outnerFram_bottom = folder_outnerFrame.addBinding(outnerFrameOptions, 'bottom', { label: '下', min: -20, max: 50, step: 1 })
  const outnerFrame_left = folder_outnerFrame.addBinding(outnerFrameOptions, 'left', { label: '左', min: -20, max: 50, step: 1 })
  const outnerFrame_w = folder_outnerFrame.addBinding(outnerFrameOptions, 'w', { label: '宽', min: 0, max: 100, step: 1 })
  const outnerFram_h = folder_outnerFrame.addBinding(outnerFrameOptions, 'h', { label: '高', min: 0, max: 100, step: 1 })
  const outnerFrame_color = folder_outnerFrame.addBinding(outnerFrameOptions, 'fillColor', { label: '填充色' })
  const outnerFram_istexture = folder_outnerFrame.addBinding(outnerFrameOptions, 'isTexure', { label: '是否填充纹理' })
  const outnerFram_texture = folder_outnerFrame.addBinding(outnerFrameOptions, 'texure', {
    options: { border: borderPng, srm: srmPng },
    label: '纹理'
  })
  // -------------------------------------------------------------------------------------
  const folder_map = pane.addFolder({ title: '地图', expanded: false })
  const map_top = folder_map.addBinding(mapOpts, 'top', { label: 'top', min: -20, max: 100, step: 1 })
  const map_left = folder_map.addBinding(mapOpts, 'left', { label: 'left', min: -20, max: 400, step: 1 })
  const map_width = folder_map.addBinding(mapOpts, 'width', { label: '地图宽', min: 100, max: 1000, step: 10 })
  const map_height = folder_map.addBinding(mapOpts, 'height', { label: '地图高', min: 100, max: 1000, step: 10 })
  // -------------------------------------------------------------------------------------
  const folder_graticul = pane.addFolder({ title: '经纬网', expanded: false })
  const graticul_top = folder_graticul.addBinding(graticulesOpts, 'offsetY', { label: 'offsetY', min: -50, max: 100, step: 1 })
  const graticul_left = folder_graticul.addBinding(graticulesOpts, 'offsetX', { label: 'offsetX', min: -50, max: 100, step: 1 })
  const graticul_degree_lat = folder_graticul.addBinding(graticulesOpts, 'lat_degree', { label: '纬度间隔', min: 0, max: 100, step: 0.5 })
  const graticul_degree_lng = folder_graticul.addBinding(graticulesOpts, 'lng_degree', { label: '经度间隔', min: 0, max: 100, step: 0.5 })
  // -------------------------------------------------------------------------------------
  const floder_bg = pane.addFolder({ title: '背景', expanded: true })
  floder_bg.addBinding(c_background.layout, 'visibility', { label: '显示', options: { 'visible': 'visible', 'none': 'none' }}).on('change', evt => {
    setLayoutProperty(map, 'bg-background', evt.target.key, evt.value)
  })
  floder_bg.addBinding(c_background.paint, 'background-color', { label: '填充色' }).on('change', evt => {
    setPaintProperty(map, 'bg-background', evt.target.key, evt.value)
  })
  floder_bg.addBinding(c_background.paint, 'background-opacity', { label: '透明度', min: 0, max: 1, step: 0.1 }).on('change', evt => {
    setPaintProperty(map, 'bg-background', evt.target.key, evt.value)
  })
  floder_bg.addBinding(c_background.paint, 'background-pattern', { label: '纹理', options: { 'unset': undefined, 'tx_ink': 'tx_ink', 'tx_lif': 'tx_lif', 'tx_holang': 'tx_holang', 'tx_fg': 'tx_fg', 'tx_detail': 'tx_detail', 'tx_185s': 'tx_185s', 'tx_sky': 'tx_sky', 'tx_mart': 'tx_mart' }}).on('change', evt => {
    setPaintProperty(map, 'bg-background', evt.target.key, evt.value)
  })
  // -------------------------------------------------------------------------------------
  const floder_raster = pane.addFolder({ title: '底图', expanded: true })
  floder_raster.addBinding(c_raster_img.layout, 'visibility', { label: '影像', options: { 'visible': 'visible', 'none': 'none' }}).on('change', evt => {
    setLayoutProperty(map, 'raster-egis-img', evt.target.key, evt.value)
    setLayoutProperty(map, 'raster-egis-img-a', evt.target.key, evt.value)
  })
  floder_raster.addBinding(c_raster_vec.layout, 'visibility', { label: '街道', options: { 'visible': 'visible', 'none': 'none' }}).on('change', evt => {
    setLayoutProperty(map, 'raster-egis-vec', evt.target.key, evt.value)
    setLayoutProperty(map, 'raster-egis-vec-a', evt.target.key, evt.value)
  })
  floder_raster.addBinding(c_raster_ter.layout, 'visibility', { label: '地形', options: { 'visible': 'visible', 'none': 'none' }}).on('change', evt => {
    setLayoutProperty(map, 'raster-egis-ter', evt.target.key, evt.value)
    setLayoutProperty(map, 'raster-egis-ter-a', evt.target.key, evt.value)
  })
  // -------------------------------------------------------------------------------------
  const floder_line = pane.addFolder({ title: '线', expanded: false })
  floder_line.addBinding(c_lineStyle.layout, 'visibility', { label: '显示', options: { 'visible': 'visible', 'none': 'none' }}).on('change', evt => {
    setLayoutProperty(map, 'layer-china', evt.target.key, evt.value)
  })
  floder_line.addBinding(c_lineStyle.paint, 'line-color', { label: '颜色' }).on('change', evt => {
    setPaintProperty(map, 'layer-china', evt.target.key, evt.value)
  })
  floder_line.addBinding(c_lineStyle.paint, 'line-width', { label: '线宽', min: 0, max: 20, step: 1 }).on('change', evt => {
    setPaintProperty(map, 'layer-china', evt.target.key, evt.value)
  })
  floder_line.addBinding(c_lineStyle.paint, 'line-blur', { label: '模糊', min: 0, max: 20, step: 1 }).on('change', evt => {
    setPaintProperty(map, 'layer-china', evt.target.key, evt.value)
  })
  floder_line.addBinding(c_lineStyle.paint, 'line-opacity', { label: '透明度', min: 0, max: 1, step: 0.1 }).on('change', evt => {
    setPaintProperty(map, 'layer-china', evt.target.key, evt.value)
  })
  // -------------------------------------------------------------------------------------
  const floder_fill = pane.addFolder({ title: '面', expanded: true })
  floder_fill.addBinding(c_fillStyle.layout, 'visibility', { label: '显示', options: { 'visible': 'visible', 'none': 'none' }}).on('change', evt => {
    setLayoutProperty(map, 'layer-provience', evt.target.key, evt.value)
  })
  floder_fill.addBinding(c_fillStyle.paint, 'fill-color', { label: '填充色' }).on('change', evt => {
    setPaintProperty(map, 'layer-provience', evt.target.key, evt.value)
  })
  floder_fill.addBinding(c_fillStyle.paint, 'fill-pattern', { label: '纹理', options: { 'unset': undefined, 'slash_red': 'slash_red', 'slash_yellow': 'slash_yellow', 'slash_green': 'slash_green', 'slash_black': 'slash_black', 'slash_blue': 'slash_blue' }}).on('change', evt => {
    setPaintProperty(map, 'layer-provience', evt.target.key, evt.value)
  })
  floder_fill.addBinding(c_fillStyle.paint, 'fill-outline-color', { label: '线色' }).on('change', evt => {
    setPaintProperty(map, 'layer-provience', evt.target.key, evt.value)
  })
  floder_fill.addBinding(c_fillStyle.paint, 'fill-opacity', { label: '透明度', min: 0, max: 1, step: 0.1 }).on('change', evt => {
    setPaintProperty(map, 'layer-provience', evt.target.key, evt.value)
  })
  // -------------------------------------------------------------------------------------
  const floder_point = pane.addFolder({ title: '点', expanded: true })
  floder_point.addBinding(c_pointStyle.layout, 'visibility', { label: '显示', options: { 'visible': 'visible', 'none': 'none' }}).on('change', evt => {
    setLayoutProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  floder_point.addBinding(c_pointStyle.layout, 'icon-image', { label: '图标', options: { 'marker': 'marker', 'circle': 'circle-white-4' }}).on('change', evt => {
    setLayoutProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  floder_point.addBinding(c_pointStyle.layout, 'icon-anchor', { label: '锚点', options: { 'center': 'center', 'left': 'left', 'top': 'top', 'right': 'right', 'bottom': 'bottom' }}).on('change', evt => {
    setLayoutProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  floder_point.addBinding(c_pointStyle.layout, 'icon-offset', { label: 'offset' }).on('change', evt => {
    const offset = [evt.value.x, evt.value.y]
    setLayoutProperty(map, 'layer-captial', evt.target.key, offset)
  })
  floder_point.addBinding(c_pointStyle.layout, 'icon-rotate', { label: '旋转', min: 0, max: 360, step: 1 }).on('change', evt => {
    setLayoutProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  floder_point.addBinding(c_pointStyle.layout, 'icon-size', { label: '比例', min: 1, max: 10, step: 1 }).on('change', evt => {
    setLayoutProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  floder_point.addBinding(c_pointStyle.layout, 'text-field', { label: '字段', options: { '名称': 'Name', '编码': 'AdminCode' }}).on('change', evt => {
    const field = ['get', evt.value]
    setLayoutProperty(map, 'layer-captial', evt.target.key, field)
  })
  floder_point.addBinding(c_pointStyle.layout, 'text-offset', { label: '注记offset' }).on('change', evt => {
    const offset = [evt.value.x, evt.value.y]
    setLayoutProperty(map, 'layer-captial', evt.target.key, offset)
  })
  floder_point.addBinding(c_pointStyle.paint, 'icon-color', { label: '图标颜色' }).on('change', evt => {
    setPaintProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  floder_point.addBinding(c_pointStyle.paint, 'icon-halo-color', { label: '光环颜色' }).on('change', evt => {
    setPaintProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  floder_point.addBinding(c_pointStyle.paint, 'icon-opacity', { label: '图标透明度', min: 0, max: 1, step: 0.1 }).on('change', evt => {
    setPaintProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  floder_point.addBinding(c_pointStyle.paint, 'text-color', { label: '字体颜色' }).on('change', evt => {
    setPaintProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  floder_point.addBinding(c_pointStyle.paint, 'text-opacity', { label: '字体透明度', min: 0, max: 1, step: 0.1 }).on('change', evt => {
    setPaintProperty(map, 'layer-captial', evt.target.key, evt.value)
  })
  // -------------------------------------------------------------------------------------
  const floder_scale = pane.addFolder({ title: '比例尺', expanded: true })
  floder_scale.addBinding(scaleOptions, 'visibility', { label: '显示' }).on('change', evt => {
    // redraw()
  })
  floder_scale.addBinding(scaleOptions, 'left', { label: 'left' })
  floder_scale.addBinding(scaleOptions, 'bottom', { label: 'bottom' })
}

// watch: data layout
watch([graticulesOpts, ruleOptions, outnerFrameOptions], (n, o) => {
  redraw()
}, { deep: true, immediate: false })

function redraw() {
  drawRule() // clearLayers
  drawOutnerFrame()
  drawGraticules()
}

// watch: map
watch([() => mapOpts.top, () => mapOpts.left], (n, o) => {
  mainView.style.top = n[0] + 'px'
  mainView.style.left = n[1] + 'px'
})

watch([() => mapOpts.width, () => mapOpts.height], (n, o) => {
  mainView.style.width = n[0] + 'px'
  mainView.style.height = n[1] + 'px'

  map?.resize?.()
})
// watch: scale
watch([() => scaleOptions.bottom, () => scaleOptions.left, () => scaleOptions.visibility], (n, o) => {
  scaleWarp.style.bottom = n[0] + 'px'
  scaleWarp.style.left = n[1] + 'px'
  if (n[2]) {
    scaleWarp.style.opacity = 1
  } else {
    scaleWarp.style.opacity = 0
  }
})
const c_lineStyle = reactive(getLineStyle())

const c_fillStyle = reactive(getFillStyle())
c_fillStyle.paint['fill-pattern'] = '' // control字段类型

const c_pointStyle = reactive(getPointStyle())
c_pointStyle.layout['text-field'] = 'Name'
c_pointStyle.layout['icon-offset'] = { x: c_pointStyle.layout['icon-offset'][0], y: c_pointStyle.layout['icon-offset'][1] }
c_pointStyle.layout['text-offset'] = { x: c_pointStyle.layout['text-offset'][0], y: c_pointStyle.layout['text-offset'][1] }

const c_background = reactive(getBgStyle())
c_background.paint['background-pattern'] = ''

const c_raster_img = reactive(getRasterStyle())
const c_raster_vec = reactive(getRasterStyle())
const c_raster_ter = reactive(getRasterStyle())

// 分段图
function addFill_subsection() {
  const style = getFillStyle()
  const steplist = [{ step: 20, color: '#A6E181' }, { step: 50, color: '#E8E225' }, { step: 100, color: '#DE683C' }]
  style.paint['fill-color'] = format_step('total', steplist, 'rgba(0,0,0,0)')
  console.log(style.paint['fill-color'])
  addFill(map, 'provience-subsection', '/data/provience.json', style)
}
// utils
function makeupPolygonGeojson(lnglats) {
  return {
    'type': 'FeatureCollection',
    'features': [
      {
        'type': 'Feature',
        'geometry': {
          'type': 'LineString',
          'coordinates': lnglats
        }
      }]
  }
}
function cornerToBounds(lefttop, rightbottom) {
  return [[lefttop.lng, lefttop.lat], [rightbottom.lng, lefttop.lat],
    [rightbottom.lng, rightbottom.lat], [lefttop.lng, rightbottom.lat], [lefttop.lng, lefttop.lat]]
}
function compareStyle(n, o) {
  const n_paint = n.paint || {}
  const o_paint = o.paint || {}

  for (let i in n_paint) {
    if (n_paint[i] !== o_paint[i]) {
      return ['paint', i, n_paint[i]]
    }
  }

  const n_layout = n.layout || {}
  const o_layout = o.layout || {}

  for (let i in n_layout) {
    if (n_layout[i] !== o_layout[i]) {
      return ['layout', i, n_layout[i]]
    }
  }
}
/**
 * @name:设置图标样式
 * @test: test font
 * @msg:
 * @param {type}
 * @return {type}
 */
function setIcon(iconName) { // 更换图标
  c_pointStyle.layout['icon-image'] = iconName
  setLayoutProperty(map, 'layer-captial', 'icon-image', iconName)
}
function showIconName(name) { // 显示选中的图标名称
  // console.log(name)
}
function imgPostion(item) { // 返回偏移img
  return `width:${item.width}px; height: ${item.height}px;margin:4px 4px 0 0;background:url('${sprite}') -${item.x}px -${item.y}px; cursor: pointer;`
}
</script>

<style lang="scss" scoped>
#draw-container {
  position: relative;
  width: fit-content;
  border: solid 1px #f18383;
}
#menu-pane {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 300px;
  padding: 10x;
  background-color: darkgrey ;
}
#main-view {
  position: absolute;
  top: 50px;
  left: 200px;
  width: 900px;
  height: 500px;
  border: solid 1px red;
  background-color: beige;
  #map {
    width: 100%;
    height: 100%;
    cursor: crosshair;
  }
  #overmap {
    // display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    cursor: crosshair;
  }
}
.sprite-view {
  position: absolute;
  top: 20px;
  right: 320px;
  width: 280px;
  height: 200px;
  overflow: auto;
}
#scale-warp {
  position: absolute;
  bottom: 20px;
  left: 50px;
}
#legend-warp {
  position: absolute;
  bottom: 20px;
  left: 200px;
  border: solid #fff 1px;
  // background-color: #fff;
}

</style>
<style lang="scss">
.mapboxgl-ctrl-scale {
  opacity: 0;
}
.mapboxgl-ctrl-logo {
  display: none !important;
}
// 附图
.attached-map {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  background-color: bisque;
  background-position: 0 0;
  background-size: 100%;
  box-shadow: rgb(136 136 136) 4px 4px 20px;
  cursor: move;
  .cut-img {
    position: absolute;
    box-shadow: rgb(136 136 136) 4px 4px 20px;
  }
  .attached-map-index {
    color: red;
    font-size: 18px;
    line-height: 100px;
    z-index: 99;
  }
}
</style>
